import React from 'react'
import '../style/topay.css'
 class Topay extends React.Component{
     componentDidMount(){
         console.log(this.props.shopinfo)
         console.log(this.props.currentshoplist)
         console.log(this.props.currentshoptotal)
     }
     fh(){
         this.props.history.push('/shangpinxq?restaurantId='+this.props.shopinfo.id)
     }
     toaddress(){
         this.props.history.push('/chooseaddress')
     }
    
     render(){
         return (
             <div>
                <div className='topay-header'>
                        <span className='topay-header-1' onClick={this.fh.bind(this)}>&lt;</span>
                        确认订单     
                </div>
                <div  className='topay-main'>
                    <div className='topay-main-1' onClick={this.toaddress.bind(this)}>
                    <div className='topay-main-1-2'><img className='topay-main-1-1'  src={require('../img/地点.png')}/>{this.props.defaultaddress.address?<span className='topay-main-1-3'>{this.props.defaultaddress.address}{this.props.defaultaddress.address_detail}</span>:<span>请添加一个收货地址</span>}</div>
                    <span>&gt;</span>
                    </div>
                    <div className='topay-main-2'>
                    <p className='topay-main-2-1' >送达时间</p>
                    <div >
                        <p className='topay-main-2-2'>尽快送达 | 预计12:41</p>
                        <span className='topay-main-2-3'>蜂鸟专送</span>
                    </div>
                    </div>
                    <div className='topay-main-3'>
                    <div className='topay-main-3-1'>
                    <p>支付方式</p>
                    <p className='topay-main-3-1-1'>在线支付 &gt;</p>
                    </div>
                    <div  className='topay-main-3-2'>
                        <p>红包</p>
                        <p>暂时只在饿了么app中支持</p>
                    </div>
                    </div>
                    <div className='topay-main-4' >
                    <h1 className='topay-main-4-2'><img className='topay-main-4-1' src={'https://elm.cangdu.org/img/'+this.props.shopinfo.image_path}/>{this.props.shopinfo.name}</h1>
                    <ul className='topay-main-4-3' >
                        {this.props.currentshoplist.map(item=>{
                            return (
                                <li key={item.id} className='topay-main-4-4'>
                                    <span>{item.name}</span>
                                    <div>
                                    <span className='topay-main-4-5' >x {item.num}</span>
                                    <span className='topay-main-4-8'>￥{item.price}</span>
                                    </div>
                                </li>
                            )
                        })}
                    </ul>
                    <h1 className='topay-main-4-6' ><span>订单总价</span><span className='topay-main-4-7' >待支付￥{this.props.currentshoptotal}</span></h1>
                    </div>
                    <div className='topay-main-5'>
                    <div className='top-main-5-1'>
                        <span>订单备注</span><span className='top-main-5-2'>口味、偏好等&gt;</span>
                    </div>
                    <div className='top-main-5-1'>
                    <span>发票抬头</span><span  className='top-main-5-2'>不需要开发票&gt;</span>
                    </div>
                    </div>
                </div>
                <div  className='topay-bottom'>
                    <p className='topay-bottom-1'>待支付￥{this.props.currentshoptotal}</p>
                    <p  className='topay-bottom-2' >确认下单</p>
                </div>
             </div>
         )
     }
 }
 export default Topay